import { people } from "./data";
import { getImageUrl } from "./utils";

function Item({ person }) {
  return (
    <li key={person.id}>
      <img src={getImageUrl(person)} alt={person.name} />
      <p>
        <b>{person.name}:</b>
        <i>{person.profession}</i>因{person.accomplishment}
        而闻名世界
      </p>
    </li>
  );
}

export default function List() {
  // const listItems = people.map((person) => (
  //   <li key={person.id}>
  //     <img src={getImageUrl(person)} alt={person.name} />
  //     <p>
  //       <b>{person.name}:</b>
  //       {" " + person.profession + " "}因{person.accomplishment}而闻名世界
  //     </p>
  //   </li>
  // ));

  // 化学家们
  const list1 = people.filter((item) => item.profession === "化学家");

  const list2 = people.filter((item) => item.profession !== "化学家");

  return (
    <article>
      <h1>科学家</h1>

      <h2>化学家们</h2>
      <ul>
        {list1.map((person) => (
          <Item person={person} />
        ))}
      </ul>

      <h2>其余的人</h2>
      <ul>
        {list2.map((person) => (
          <Item person={person} />
        ))}
      </ul>
    </article>
  );
}
